<template>
	<el-container>
		<el-header>
			<NavBar></NavBar>
		</el-header>
		<el-container>
			<el-aside width="auto">
				<SideBar></SideBar>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import SideBar from '@/components/SideBar.vue';
import NavBar from '@/components/NavBar.vue';
export default {
	components: {
		SideBar,
		NavBar,
	},
}
</script>

<style lang="less" scoped>
// 审查元素，找到类名(注意优先级的问题，加class提高优先级)
.el-header {
	background-color: #31404e;
	color: white;

	.nav-bar {
		position: fixed;
		/* 右下角：右侧+下方 */
		top: 0;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 100;
		background-color: #31404e;
		border: 0;
	}
}

.el-aside {
	// 设置最小高度，calc()是计算函数，且减号、乘号等前后要有空格
	min-height: calc(100vh - 60px);
	background-color: #545c64;
}
</style>
